<template>
    <a-drawer
            class="_form"
            title="个人中心"
            width="520"
            :maskClosable="false"
            :visible="visible"
            @close="onClose"
    >

        <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader admin_avatar"
                :show-upload-list="false"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :before-upload="beforeUpload"
                @change="handleChange"
        >
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
            <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                    Upload
                </div>
            </div>
        </a-upload>
        <a-form-model
                ref="ruleForm"
                :model="form"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
        >
            <a-form-model-item label="登陆账号" prop="account">
                <a-input
                        v-model="form.account"
                        :disabled = 'true'
                />
            </a-form-model-item>
            <a-form-model-item  ref="account" label="姓名" prop="name">
                <a-input
                        v-model="form.name"
                />
            </a-form-model-item>
            <a-form-model-item ref="mobile" label="手机号" prop="mobile">
                <a-input
                    v-model="form.mobile"/>
            </a-form-model-item>
            <a-form-model-item label="所属机构" prop="org">
                <a-input
                    v-model="form.org"
                    :disabled = "true"/>
            </a-form-model-item>
            <a-form-model-item  label="有效期" prop="Effective">
                <a-input
                        v-model="form.name"
                        :disabled = 'true'
                />
            </a-form-model-item>
            <a-form-model-item  label="状态" prop="status">
                <a-input
                        v-model="form.status"
                        :disabled = 'true'
                />
            </a-form-model-item>
            <a-form-model-item  label="邮箱" prop="email">
                <a-input
                        v-model="form.email"
                        :disabled = 'true'
                />
            </a-form-model-item>
        </a-form-model>
        <div class="drawer-bottom">
            <a-button style="marginRight: 8px" @click="onClose">
                取消
            </a-button>
            <a-button type="primary" @click="onClose">
                保存
            </a-button>
        </div>
    </a-drawer>
</template>

<script>
    export default {
        name: "AdminDrawer",
        props: {
            visible: {
                type: Boolean,
                required: false,
                default: false
            },
        },
        data() {
            return {
                labelCol: { span: 4 },
                wrapperCol: { span: 14 },
                form: {
                    account: '',
                    name:'',
                    mobile: '',
                    org: '',
                    Effective: '',
                    status:'',
                    email: ''
                }
            };
        },
        methods: {
            onClose() {
                this.$emit('closeUserCenter',false)
                // this.$emit('closeEditForm',false)
            }
        },
    }
</script>

<style lang="less" scoped>
    .admin_avatar{
        display: flex;
        justify-content: center;
    }
</style>
